<template>
	<view>
		<!-- 商品详情大图 -->
		<swiper-image :resdata="banners" height="750" :preview="true"></swiper-image>
		
		<!-- 基础详情 -->
		<base-info :detail="detail"></base-info>
		
		<!-- 滚动商品特性 -->
		<scroll-attrs :baseAttrs="baseAttrs"></scroll-attrs>
		<!-- 属性选择 -->
		<view class="p-2">
			<view class="rounded border bg-light-secondary">
				<uni-list>
					<uni-list-item  style="background-color: #F1F1F1;"
					:clickable="true"
					@click="show('attr')">
						<view class="d-flex" slot="body">
							<text class="mr-2 text-muted">已选</text>
							<text>火焰红 64G 标配</text>
						</view>
					</uni-list-item>
					<uni-list-item  style="background-color: #F1F1F1;"
					:clickable="true"
					@click="show('express')">
						<view class="d-flex" slot="body">
							<text class="mr-2 text-muted">配送</text>
							<text>北京 东城区</text>
							<text class="main-text-color">有现货</text>
						</view>
					</uni-list-item>
					<uni-list-item  style="background-color: #F1F1F1;"
					:clickable="true"
					@click="show('service')">
						<view class="d-flex a-center" slot="body">
							<view class="text-muted font d-flex a-center">
								<view class="iconfont icon-finish  main-text-color"></view>
								<text class="mx-1">小米自营</text>
							</view>
							<view class="text-muted font d-flex a-center">
								<view class="iconfont icon-finish main-text-color"></view>
								<text class="mx-1">七天无理由退货</text>
							</view>
							<view class="text-muted font d-flex a-center">
								<view class="iconfont icon-finish main-text-color"></view>
								<text class="mx-1">小米发货</text>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
				
			</view>
		</view>
		
		<!-- 横向滚动评论 -->
		<scroll-comments :comments="comments"></scroll-comments>
		
		<!-- 商品详情 -->
		<u-parse className="uparse" :content="content"></u-parse>
		
		<!-- 热门推荐 -->
		<card title="为你推荐" :titleWeight="false">
			<view class="row j-sb">
				<common-list v-for="(item, index) in hotList" :key="index"
				:item="item" :index="index">
				</common-list>
			</view>
		</card>
		
		<!-- 底部操作条 -->
		<bottom-btn @show="show('attr')"></bottom-btn>
		
		<!-- 属性弹出框 -->
		<common-popup :popupClass="popup.attr" @hide="hide('attr')">
			<!-- 上部分 -->
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="/static/images/demo/cate_02.png"
				class="border rounded"
				style="width: 180rpx;height: 180rpx;"
				mode="widthFix"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font">2399</price>
					<text class="d-block">火焰红 64G 标配</text>
				</view>
			</view>
			<!-- 表单部分 -->
			<scroll-view scroll-y="true" class="w-100" style="height: 660rpx;">
				<card :title="item.title" :titleWeight="false" :headBorderBottom="false"
				v-for="(item, index) in selects" :key="index">
					<zcm-radio-group :label="item" :selected.sync='item.selected'></zcm-radio-group>
				</card>
				<view class="d-flex j-sb a-center p-2 border-top border-secondary">
					<text>购买数量</text>
					<uni-number-box :min="1" :value="detail.num"
					@change="detail.num = $event"></uni-number-box>
				</view>
				
			</scroll-view>
			<!-- 按钮 -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center p-0" 
			style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color"
			@tap.stop="addCart">
				<text>加入购物车</text>
			</view>
		</common-popup>
		
		<!-- 收货地址弹出层 -->
		<common-popup :popupClass="popup.express" @hide="hide('express')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary"
			style="height: 100rpx;">
				<text>收货地址</text>
			</view>
			<!-- 表单部分 -->
			<scroll-view scroll-y="true" class="w-100" style="height: 835rpx;"
			:show-scrollbar="false">
				<uni-list>
					<uni-list-item
					v-for="(item, index) in pathList" :key="index">
						<view class="" slot="body">
							<view class="iconfont icon-dingwei font-weight">
								<text>{{item.name}}</text>
							</view>
							<view class="font text-light-muted">
								<text>{{item.path}} {{item.detailPath}}</text>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
				
			</scroll-view>
			<!-- 按钮 -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center p-0" 
			style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color"
			@tap.stop="openCreatePathPage">
				<text>选择新的地址</text>
			</view>
		</common-popup>
		
		<!-- 服务说明弹出层 -->
		<common-popup :popupClass="popup.service" @hide="hide('service')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary"
			style="height: 100rpx;">
				<text>服务说明</text>
			</view>
			<!-- 表单部分 -->
			<scroll-view scroll-y="true" class="w-100" style="height: 835rpx;"
			:show-scrollbar="false">
				<view class="py-1">
					<view class="d-flex a-center">
						<view class="iconfont icon-finish main-text-color ml-2"></view>
						<text>小米自营</text>
					</view>
					<view class="text-light-muted font pl-4">
						<text>不管满多少就是不包邮</text>
					</view>
				</view>
				
			</scroll-view>
			<!-- 按钮 -->
			<view class="main-bg-color text-white font-md d-flex a-center j-center p-0" 
			style="height: 100rpx;margin-left: -32rpx;margin-right: -32rpx;"
			hover-class="main-bg-hover-color"
			@tap.stop="hide('service')">
				<text>确定</text>
			</view>
		</common-popup>
	</view>
</template>

<script>
	import swiperImage from "@/components/index/swiper-image.vue"
	import baseInfo from "@/components/detail/base-info.vue"
	import scrollAttrs from "@/components/detail/scroll-attrs.vue"
	import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import scrollComments from "@/components/detail/scroll-comments.vue"
	import uParse from "@/components/feng-parse/parse.vue"
	import card from "@/components/common/card.vue"
	import commonList from "@/components/common/common-list.vue"
	import bottomBtn from "@/components/detail/bottom-btn.vue"
	import commonPopup from "@/components/common/common-popup.vue"
	import price from "@/components/common/price.vue"
	import zcmRadioGroup from "@/components/common/radio-group.vue"
	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue"
	import {mapState, mapMutations} from "vuex"

		var htmlString = `
		<p>
			<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
			<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
			<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
			<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
			<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
			<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
			<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">
		</p>
		    `
	
	export default {
		components: {
			swiperImage,
			baseInfo,
			scrollAttrs,
			uniList,
			uniListItem,
			scrollComments,
			uParse,
			card,
			commonList,
			bottomBtn,
			commonPopup,
			price,
			zcmRadioGroup,
			uniNumberBox,
		},
		
		data() {
			return {
				//单选按钮组
				selects: [
					{
						title:'颜色',
						selected: 0,
						list:[
							{name:"红色"},
							{name:"黄色"},
							{name:"绿色"},
						]
					},
					{
						title:'容量',
						selected: 0,
						list:[
							{name:"32G"},
							{name:"64G"},
							{name:"128G"},
						]
					},
					{
						title:'套餐',
						selected: 0,
						list:[
							{name:"标配"},
							{name:"套餐一"},
							{name:"套餐二"},
						]
					}
				],
				//弹出层
				popup: {
					attr: "none",
					express:"none",
					service: "none"
				},
				//热门推荐
				hotList: [
					{
						cover: "/static/images/demo/22.png",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					}
				],
				//详情
				content: htmlString,
				//评论
				comments: [
					{nickName: "强强", avatar: "/static/images/demo/demo6.jpg", 
					createTime: "2020-10-01", goodsNum: 88, context: "真好啊 不赖呢！！",
					imgList: ["/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg"],
					},
					{nickName: "强强", avatar: "/static/images/demo/demo6.jpg",
					createTime: "2020-10-01", goodsNum: 88, context: "真好啊 不赖呢！！",
					imgList: ["/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg"],
					},
					{nickName: "强强", avatar: "/static/images/demo/demo6.jpg",
					createTime: "2020-10-01", goodsNum: 88, context: "真好啊 不赖呢！！",
					imgList: ["/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg", "/static/images/demo/list/2.jpg"],
					}
				],
				
				banners: [
					{src: "/static/images/detail/detail1.jpg"},
					{src: "/static/images/detail/detail2.jpg"},
					{src: "/static/images/detail/detail3.jpg"},
				],
				
				//
				detail: {
					id: 20,
					title: "小米MIX3 8GB + 128GB",
					cover: "/static/images/demo/list/1.jpg",
					desc: "磁动力滑盖全面屏 / 后旗舰AI双摄 / 四曲面彩色陶瓷机身 / 高效20W无线充电",
					pprice: 3299,
					num: 1,
					max: 100
				},
				
				baseAttrs: [
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
					{icon: "icon-cpu", title:"CPU", desc:"骁龙845八核"},
				]
			}
		},
		//监听点击返回按钮
		onBackPress() {
			for(let key in this.popup) {
				if(this.popup[key] !== 'none') {
					this.hide(key)
					return true
				}
			}
		},
		
		methods: {
			...mapMutations(['addGoodsToCart']),
			
			//加入购物车
			addCart() {
				let goods = this.detail
				goods['checked'] = false
				goods['attrs'] = this.selects
				//加入购物车
				this.addGoodsToCart(goods)
				this.hide('attr')
				uni.showToast({
					title: '加入购物车成功'
				});
				//隐藏筛选框
			},

			navigate(e){
				console.log(e)
			},
			
			//打开新增地址页面
			openCreatePathPage() {
				uni.navigateTo({
					url: '../user-path-edit/user-path-edit'
				});
				this.hide('express')
			},
			
			hide(key) {
				this.popup[key] = 'hide';
				setTimeout(() => {
					this.popup[key] = 'none'
				}, 200)
			},
			show(key) {
				this.popup[key] = 'show';
			}
		},
		
		//计算属性
		computed: {
			...mapState({
				pathList: state => state.path.list
			})
		}
	}
</script>

<style>
.text_hide_2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.uparse .p{
	padding: 0 !important;
}
.uparse view {
	line-height: 0!important;
}

</style>
